<template>
   <div class="listbox">
        <div class="ListTopBox" style="width:90%;height: 100px; line-height: 100px;margin:0 auto">
            <span>条件查询 </span>
            <el-input
                placeholder="请输入内容"
                style="width: 150px; margin-right: 10px" v-model="value"
            >
            </el-input>
            <el-button type="primary" style="width:65px;height:30px;margin-right:5px" @click="getSalespersons(value)">查询</el-button>
            <el-button type="success" style="width:65px;height:30px" @click="$router.push('/System/salespersonsAdd')">添加</el-button>
        </div>
        <!-- <table class="listTable">
            <tr style="height: 70px">
                <td>销售员姓名</td>
                <td>员工电话</td>
                
                <td>操作</td>
                
            </tr>
            <tr v-for="item in pageData.salespersons" :key="item._id"
                
                style="height:70px"
            >
                <td>{{item.names}}</td>
                <td>{{item.phonenum}}</td>
                
                <td>
                    
                        <button @click="deleteSalespersons(item._id)">删除</button
                        >
                    
                    <button >编辑</button>
                </td>
            </tr>
               
             
           
        </table> -->
              <el-table
      :data="pageData.salespersons" 
      style="width: 90%;margin:0 auto;padding:10px" >
      <el-table-column
        prop="names"
        label="销售员姓名"
        width="330">
      </el-table-column>
      <el-table-column
        prop="phonenum"
        label="员工电话"
        width="330">
      </el-table-column>
      <el-table-column
        prop="_id"
        label="操作"
         width="330">
        <template slot-scope="scope">
       <el-button type="primary" style="width:65px;height:30px;margin-right:5px" @click="deleteSalespersons(scope.row._id)">删除</el-button
                        >
                    
                    <el-button type="primary"  style="width:65px;height:30px;margin-right:5px" @click="$router.push(`/system/salespersonsChange/:${scope.row._id}`)">编辑</el-button>

                    </template>
      </el-table-column>
    </el-table>
        <!--  -->
         <div style="width:100%;height:40px;line-height:40px">
                  <select v-model="mypageSize">
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                  </select>
                  <button @click="setCurrentPage(1)">首页</button>
                  <button @click="setCurrentPage(currentPage-1)">上一页</button>
                  <button @click="setCurrentPage(currentPage+1)">下一页</button>
                  <button @click="setCurrentPage(pages)">尾页</button>
                  <span>{{currentPage}}/{{pages}}</span>
                  <span>共计{{total}}条数据</span>
              </div>
     
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions,mapState,mapMutations } = createNamespacedHelpers(
    "salespersons"
);
export default {
 data() {
        return {
           value:'',
           pageDatas:[]
        };
    },
    created() {
        this.getSalespersons();
     
    },
    mounted(){
        console.log(2037,this.pageData.salespersons);
    },
    watch:{
         pageSize(){
            this.getSalespersons()
        },
        currentPage(){
            this.getSalespersons() 
        },
        // pageData(newName,oldName){
        //     this.pageDatas=this.pageData.salespersons;
        //     console.log(newName,oldName);
        // },
        immediate:true,
        deep:true
    },
    computed: {
        ...mapState(["pageData",'pageSize','total','currentPage','pages']),
         mypageSize:{
            get(){
                return this.pageSize
            },
            set(val){
                 this.setPageSize(val);
                 console.log(val);
            },
        }
        // mypageSize:{
        //     get(){
        //         return this.pageSize
        //     },
        //     set(val){
        //          this.setPageSize(val);
        //          console.log(val);
        //     },
        // }
    },
    methods: {
        ...mapMutations(['setPageSize','setCurrentPage']),
        ...mapActions(["getSalespersons","deleteSalespersons"]),
    },
}
</script>

<style>
.listTable {
    width: 1000px;
    height: 250px;
    border-collapse: collapse;
    border: none;
    margin: 0 auto;
    text-align: center;
    background-color: whitesmoke;
    line-height: 0px;
}
tr {
    height: 60px;
}


.ListTopBox {
    text-align: left;
    /* border:1px solid black; */
}
</style>